<template>
  <a-switch
    v-model="val"
    :style="{width:width>0?`${width}px`:'100%'}"
    :checked-children="text[0]"
    :un-checked-children="text[1]"
    @change="switchChange"
    :disabled="disabled">
  </a-switch>
</template>

<script>
export default {
  model: {
    prop: 'modelVal',
    event: 'change'
  },
  props: {
    modelVal: {
      type: [Number, Boolean],
      default: false
    },
    width: {
      type: Number,
      default: 60
    },
    text: {
      type: Array,
      default: () => {
        return ['开启', '关闭']
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      val: false
    }
  },
  mounted () {
    this.init()
  },
  watch: {
    modelVal (v) {
      this.init()
    },
    val (v) {
      this.$emit('change', v)
    }
  },
  methods: {
    init () {
      if (typeof this.modelVal === 'number') {
        this.val = this.modelVal === 1
      } else {
        this.val = this.modelVal
      }
    },
    switchChange (v) {
      this.$emit('switchChange', v)
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
